<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>诗词库 - 诗词学习应用</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  
  <!-- Tailwind配置 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#8B4513',
            secondary: '#D2B48C',
            accent: '#A52A2A',
            light: '#F5F5DC',
          },
          fontFamily: {
            sans: ['Inter', 'system-ui', 'sans-serif'],
            serif: ['Noto Serif SC', 'serif'],
          },
        },
      }
    }
  </script>
  
  <style type="text/tailwindcss">
    @layer utilities {
        .content-auto {
            content-visibility: auto;
        }
        .poem-card {
            background-color: white;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
            padding: 1rem;
            margin-bottom: 1rem;
            transition: all 300ms ease;
            &:hover {
                box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
                transform: translateY(-2px);
            }
        }
        .btn-primary {
            background-color: #8B4513;
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            transition: all 300ms ease;
            &:hover {
                background-color: rgba(139, 69, 19, 0.8);
            }
            &:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(139, 69, 19, 0.5);
            }
        }
        .btn-secondary {
            background-color: #D2B48C;
            color: #8B4513;
            padding: 0.5rem 1rem;
            border-radius: 0.375rem;
            transition: all 300ms ease;
            &:hover {
                background-color: rgba(210, 180, 140, 0.8);
            }
            &:focus {
                outline: none;
                box-shadow: 0 0 0 2px rgba(210, 180, 140, 0.5);
            }
        }
        .nav-item {
            color: white;
            transition: color 300ms ease;
            &:hover {
                color: #D2B48C;
            }
        }
        .pagination-item {
            padding: 0.25rem 0.5rem;
            border-radius: 0.375rem;
            border: 1px solid #D1D5DB;
            margin: 0 0.25rem;
            transition: all 300ms ease;
            &:hover {
                background-color: #8B4513;
                color: white;
                border-color: #8B4513;
            }
        }
        .pagination-item.active {
            background-color: #8B4513;
            color: white;
            border-color: #8B4513;
        }
    }
</style>
</head>
<body class="bg-light min-h-screen flex flex-col">
  <!-- 导航栏 -->
  <nav class="bg-primary text-white shadow-lg sticky top-0 z-50">
    <div class="container mx-auto px-4 py-3 flex justify-between items-center">
      <div class="flex items-center space-x-2">
        <i class="fa fa-book text-2xl"></i>
        <h1 class="text-xl md:text-2xl font-bold">拾光诗栈</h1>
      </div>
      
      <div class="hidden md:flex space-x-8">
        <a href="index.html" class="nav-item flex items-center"><i class="fa fa-home mr-2"></i>首页</a>
        <a href="browse.html" class="nav-item flex items-center"><i class="fa fa-list mr-2"></i>诗词库</a>
        <a href="plan.html" class="nav-item flex items-center"><i class="fa fa-calendar mr-2"></i>学习计划</a>
        <a href="favorite.html" class="nav-item flex items-center"><i class="fa fa-heart mr-2"></i>我的收藏</a>
        <a href="login.html" class="nav-item flex items-center"><i class="fa fa-user mr-2"></i>登录</a>
      </div>
      
      <div class="flex items-center space-x-4">
        <div class="relative hidden md:block">
          <input type="text" id="search-input" placeholder="搜索诗词..." 
                 class="py-1 px-3 rounded-full focus:outline-none text-gray-800 w-40 lg:w-60">
          <button id="search-btn" class="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500">
            <i class="fa fa-search"></i>
          </button>
          <!-- 搜索结果下拉框 -->
          <div id="search-results" class="absolute top-full left-0 w-full bg-white border border-gray-300 rounded-md mt-1 shadow-lg z-10 hidden max-h-60 overflow-auto">
            <!-- 搜索结果内容将通过JavaScript动态生成 -->
          </div>
        </div>
        <button id="mobile-menu-btn" class="md:hidden text-white focus:outline-none">
          <i class="fa fa-bars text-xl"></i>
        </button>
      </div>
    </div>
    
    <!-- 移动端菜单 -->
    <div id="mobile-menu" class="md:hidden bg-primary/95 backdrop-blur-md hidden animate-fadeIn">
      <div class="container mx-auto px-4 py-3 flex flex-col space-y-4">
        <div class="relative">
          <input type="text" placeholder="搜索诗词..." 
                 class="w-full py-2 px-4 rounded-full focus:outline-none text-gray-800">
          <button class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500">
            <i class="fa fa-search"></i>
          </button>
        </div>
        <a href="index.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-home mr-2 w-5"></i>首页
        </a>
        <a href="browse.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-list mr-2 w-5"></i>诗词库
        </a>
        <a href="plan.html" class="nav-item py-2 border-b border-gray-700 flex items-center">
          <i class="fa fa-calendar mr-2 w-5"></i>学习计划
        </a>
        <a href="favorite.html" class="nav-item py-2 flex items-center">
          <i class="fa fa-heart mr-2 w-5"></i>我的收藏
        </a>
        <a href="login.html" class="nav-item py-2 flex items-center">
          <i class="fa fa-user mr-2 w-5"></i>登录
        </a>
      </div>
    </div>
  </nav>

  <!-- 主要内容 -->
  <main class="flex-grow container mx-auto px-4 py-8">
    <!-- 标题和筛选 -->
    <section class="mb-8">
      <h2 class="text-2xl md:text-3xl font-bold text-primary mb-6">诗词库</h2>
      
      <div class="bg-white rounded-lg shadow-md p-4 mb-6">
        <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">朝代</label>
            <select id="dynasty-filter" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50">
              <option value="">全部</option>
              <option value="tang">唐代</option>
              <option value="song">宋代</option>
              <option value="yuan">元代</option>
              <option value="ming">明代</option>
              <option value="qing">清代</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">作者</label>
            <select id="author-filter" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50">
              <option value="">全部</option>
              <option value="李白">李白</option>
              <option value="杜甫">杜甫</option>
              <option value="王维">王维</option>
              <option value="白居易">白居易</option>
              <option value="苏轼">苏轼</option>
              <option value="马致远">马致远</option>
              <option value="高启">高启</option>
              <option value="纳兰性德">纳兰性德</option>
            </select>
          </div>
          <div>
            <label class="block text-sm font-medium text-gray-700 mb-1">分类</label>
            <select id="category-filter" class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50">
              <option value="">全部</option>
              <option value="爱情">爱情</option>
              <option value="山水">山水</option>
              <option value="友情">友情</option>
              <option value="爱国">爱国</option>
              <option value="哲理">哲理</option>
              <option value="思乡">思乡</option>
              <option value="离愁">离愁</option>
              <option value="中秋">中秋</option>
            </select>
          </div>
          <div class="flex items-end">
            <button id="filter-btn" class="btn-primary w-full flex justify-center items-center">
              <i class="fa fa-filter mr-2"></i>筛选
            </button>
          </div>
        </div>
      </div>
    </section>
    
    <!-- 诗词列表 -->
    <section class="mb-8">
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6" id="poems-container">
        <!-- 诗词卡片将由JavaScript动态生成 -->
      </div>
    </section>
    
    <!-- 分页 -->
    <section class="flex justify-center">
      <div class="inline-flex rounded-md shadow">
        <a href="#" class="pagination-item">上一页</a>
        <a href="#" class="pagination-item active">1</a>
        <a href="#" class="pagination-item">2</a>
        <a href="#" class="pagination-item">3</a>
        <span class="pagination-item border-0">...</span>
        <a href="#" class="pagination-item">12</a>
        <a href="#" class="pagination-item">下一页</a>
      </div>
    </section>
  </main>

  <!-- 页脚 -->
  <footer class="bg-primary text-white py-8">
    <div class="container mx-auto px-4">
      <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
        <div>
          <h3 class="text-xl font-bold mb-4">诗词学习</h3>
          <p class="text-gray-300">探索中国古典诗词的魅力，感受千年文化的积淀，提升文学素养。</p>
          <div class="flex space-x-4 mt-4">
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-weibo text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-wechat text-xl"></i>
            </a>
            <a href="#" class="text-white hover:text-secondary transition-colors duration-300">
              <i class="fa fa-github text-xl"></i>
            </a>
          </div>
        </div>
        
        <div>
          <h3 class="text-xl font-bold mb-4">快速链接</h3>
          <ul class="space-y-2">
            <li><a href="index.html" class="text-gray-300 hover:text-white transition-colors duration-300">首页</a></li>
            <li><a href="browse.html" class="text-gray-300 hover:text-white transition-colors duration-300">诗词库</a></li>
            <li><a href="plan.html" class="text-gray-300 hover:text-white transition-colors duration-300">学习计划</a></li>
            <li><a href="favorite.html" class="text-gray-300 hover:text-white transition-colors duration-300">我的收藏</a></li>
            <li><a href="login.html" class="text-gray-300 hover:text-white transition-colors duration-300">登录</a></li>
          </ul>
        </div>
        
        <div>
          <h3 class="text-xl font-bold mb-4">联系我们</h3>
          <ul class="space-y-2">
            <li class="flex items-start">
              <i class="fa fa-envelope-o mt-1 mr-2"></i>
              <span class="text-gray-300">contact@shicixuexi.com</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-phone mt-1 mr-2"></i>
              <span class="text-gray-300">400-123-4567</span>
            </li>
            <li class="flex items-start">
              <i class="fa fa-map-marker mt-1 mr-2"></i>
              <span class="text-gray-300">北京市海淀区中关村南大街5号</span>
            </li>
          </ul>
        </div>
      </div>
      
      <div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
        <p>&copy; 2025 诗词学习平台. 保留所有权利.</p>
      </div>
    </div>
  </footer>

  <!-- JavaScript -->
  <script>
    // 移动端菜单切换组件******
    document.getElementById('mobile-menu-btn').addEventListener('click', function() {
      const mobileMenu = document.getElementById('mobile-menu');
      mobileMenu.classList.toggle('hidden');
    });
    
    // 搜索功能组件****
    const searchInput = document.getElementById('search-input');
    const searchBtn = document.getElementById('search-btn');
    const searchResults = document.getElementById('search-results');
    
    // 监听输入事件
    searchInput.addEventListener('input', function() {
      const searchTerm = this.value.trim();
      if (searchTerm) {
        performSearch(searchTerm);
      } else {
        searchResults.classList.add('hidden');
      }
    });
    
    // 点击搜索按钮
    searchBtn.addEventListener('click', function() {
      const searchTerm = searchInput.value.trim();
      if (searchTerm) {
        performSearch(searchTerm, true);
      }
    });
    
    // 执行搜索
    function performSearch(query, isButtonClick = false) {
      const filteredResults = poems.filter(poem => {
        return (
          poem.title.includes(query) || 
          poem.author.includes(query) || 
          poem.dynasty.includes(query) ||
          poem.category.includes(query) ||
          poem.content.includes(query)
        );
      });
      
      if (isButtonClick) {
        // 点击搜索按钮，跳转到搜索结果页
        if (filteredResults.length > 0) {
          // 实际应用中这里可以跳转到专门的搜索结果页
          // 这里我们暂时只显示第一个匹配结果
          window.location.href = `detail.html?id=${filteredResults[0].id}`;
        } else {
          alert(`没有找到与"${query}"相关的内容`);
        }
      } else {
        // 输入时显示下拉提示
        displaySearchResults(filteredResults, query);
      }
    }
    
    // 显示搜索结果下拉提示
    function displaySearchResults(results, query) {
      searchResults.innerHTML = '';
      
      if (results.length === 0) {
        const noResultItem = document.createElement('div');
        noResultItem.className = 'p-2 text-gray-500';
        noResultItem.textContent = `没有找到与"${query}"相关的内容`;
        searchResults.appendChild(noResultItem);
      } else {
        results.slice(0, 5).forEach(result => {
          const resultItem = document.createElement('a');
          resultItem.href = `detail.html?id=${result.id}`;
          resultItem.className = 'block p-2 hover:bg-gray-100 transition-colors cursor-pointer';
          
          const title = highlightMatch(result.title, query);
          const author = highlightMatch(result.author, query);
          const dynasty = highlightMatch(result.dynasty, query);
          
          resultItem.innerHTML = `
            <div class="font-medium text-gray-800">${title}</div>
            <div class="text-sm text-gray-600">${author} · ${dynasty}</div>
          `;
          searchResults.appendChild(resultItem);
        });
      }
      
      searchResults.classList.remove('hidden');
    }
    
    // 高亮匹配的关键词
    function highlightMatch(text, query) {
      if (!query) return text;
      const regex = new RegExp(query, 'gi');
      return text.replace(regex, match => `<span class="bg-yellow-200">${match}</span>`);
    }
    //搜索功能到这结束
    
    // 筛选功能组件******
    document.getElementById('filter-btn').addEventListener('click', function() {
      const dynastyValue = document.getElementById('dynasty-filter').value;
      const authorValue = document.getElementById('author-filter').value;
      const categoryValue = document.getElementById('category-filter').value;
      
      let filteredPoems = poems;
      
      if (dynastyValue) {
        const dynastyMap = {
          'tang': '唐',
          'song': '宋',
          'yuan': '元',
          'ming': '明',
          'qing': '清'
        };
        const dynastyText = dynastyMap[dynastyValue];
        filteredPoems = filteredPoems.filter(poem => poem.dynasty === dynastyText);
      }
      
      if (authorValue) {
        filteredPoems = filteredPoems.filter(poem => poem.author === authorValue);
      }
      
      if (categoryValue) {
        filteredPoems = filteredPoems.filter(poem => poem.category === categoryValue);
      }
      
      renderPoems(filteredPoems);
    });
    
    // 渲染诗词列表函数
    function renderPoems(poemsToRender) {
      const poemsContainer = document.getElementById('poems-container');
      poemsContainer.innerHTML = '';
      
      poemsToRender.forEach(poem => {
        const poemCard = document.createElement('div');
        poemCard.className = 'poem-card relative';
        poemCard.innerHTML = `
          <div class="flex justify-between items-start mb-3">
            <h4 class="text-lg font-bold text-primary">${poem.title}</h4>
            <span class="text-sm text-gray-500">${poem.dynasty}·${poem.author}</span>
          </div>
          <p class="text-gray-700 mb-3 line-clamp-3 font-serif">${poem.content.replace(/\n/g, '<br>')}</p>
          <a href="detail.html?id=${poem.id}" class="text-accent hover:underline flex items-center">
            阅读全文 <i class="fa fa-angle-right ml-1"></i>
          </a>
          <span class="absolute bottom-2 right-2 bg-secondary text-white px-2 py-1 rounded text-xs">${poem.category}</span>
        `;
        poemsContainer.appendChild(poemCard);
      });
    }
    
    // 模拟数据 - 诗词库
    const poems = [
      {
        id: 1,
        title: "静夜思",
        dynasty: "唐",
        author: "李白",
        content: "床前明月光，疑是地上霜。\n举头望明月，低头思故乡。",
        category: "思乡"
      },
      {
        id: 2,
        title: "春望",
        dynasty: "唐",
        author: "杜甫",
        content: "国破山河在，城春草木深。\n感时花溅泪，恨别鸟惊心。\n烽火连三月，家书抵万金。\n白头搔更短，浑欲不胜簪。",
        category: "爱国"
      },
      {
        id: 3,
        title: "相见欢",
        dynasty: "五代",
        author: "李煜",
        content: "无言独上西楼，月如钩。\n寂寞梧桐深院锁清秋。\n剪不断，理还乱，是离愁。\n别是一般滋味在心头。",
        category: "离愁"
      },
      {
        id: 4,
        title: "望庐山瀑布",
        dynasty: "唐",
        author: "李白",
        content: "日照香炉生紫烟，遥看瀑布挂前川。\n飞流直下三千尺，疑是银河落九天。",
        category: "山水"
      },
      {
        id: 5,
        title: "登鹳雀楼",
        dynasty: "唐",
        author: "王之涣",
        content: "白日依山尽，黄河入海流。\n欲穷千里目，更上一层楼。",
        category: "哲理"
      },
      {
        id: 6,
        title: "水调歌头·明月几时有",
        dynasty: "宋",
        author: "苏轼",
        content: "明月几时有？把酒问青天。\n不知天上宫阙，今夕是何年。\n我欲乘风归去，又恐琼楼玉宇，高处不胜寒。\n起舞弄清影，何似在人间？\n转朱阁，低绮户，照无眠。\n不应有恨，何事长向别时圆？\n人有悲欢离合，月有阴晴圆缺，此事古难全。\n但愿人长久，千里共婵娟。",
        category: "中秋"
      },
      // 元曲
      {
        id: 7,
        title: "天净沙·秋思",
        dynasty: "元",
        author: "马致远",
        content: "枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。",
        category: "思乡"
      },
      {
        id: 8,
        title: "山坡羊·潼关怀古",
        dynasty: "元",
        author: "张养浩",
        content: "峰峦如聚，波涛如怒，山河表里潼关路。望西都，意踌躇。伤心秦汉经行处，宫阙万间都做了土。兴，百姓苦；亡，百姓苦！",
        category: "爱国"
      },
      // 明清诗词
      {
        id: 9,
        title: "登金陵雨花台望大江",
        dynasty: "明",
        author: "高启",
        content: "大江来从万山中，山势尽与江流东。钟山如龙独西上，欲破巨浪乘长风。江山相雄不相让，形胜争夸天下壮。秦皇空此瘗黄金，佳气葱葱至今王。我怀郁塞何由开，酒酣走上城南台；坐觉苍茫万古意，远自荒烟落日之中来！石头城下涛声怒，武骑千群谁敢渡？黄旗入洛竟何祥，铁锁横江未为固。前三国，后六朝，草生宫阙何萧萧。英雄乘时务割据，几度战血流寒潮。我生幸逢圣人起南国，祸乱初平事休息。从今四海永为家，不用长江限南北。",
        category: "爱国"
      },
      {
        id: 10,
        title: "长相思·山一程",
        dynasty: "清",
        author: "纳兰性德",
        content: "山一程，水一程，身向榆关那畔行，夜深千帐灯。风一更，雪一更，聒碎乡心梦不成，故园无此声。",
        category: "思乡"
      }
    ];

    // 获取 URL 参数
    const urlParams = new URLSearchParams(window.location.search);
    const dynastyParam = urlParams.get('dynasty');

    // 根据朝代参数筛选诗词
    let filteredPoems = poems;
    if (dynastyParam) {
      if (dynastyParam === 'tang') {
        filteredPoems = poems.filter(poem => poem.dynasty === '唐');
      } else if (dynastyParam === 'song') {
        filteredPoems = poems.filter(poem => poem.dynasty === '宋');
      } else if (dynastyParam === 'yuan') {
        filteredPoems = poems.filter(poem => poem.dynasty === '元');
      } else if (dynastyParam === 'ming') {
        filteredPoems = poems.filter(poem => poem.dynasty === '明');
      } else if (dynastyParam === 'qing') {
        filteredPoems = poems.filter(poem => poem.dynasty === '清');
      } else if (dynastyParam === 'mingqing') {
        filteredPoems = poems.filter(poem => poem.dynasty === '明' || poem.dynasty === '清');
      }
    }

// 渲染诗词列表
const poemsContainer = document.getElementById('poems-container');
filteredPoems.forEach(poem => {
  const poemCard = document.createElement('div');
  poemCard.className = 'poem-card relative'; // 添加relative定位
  poemCard.innerHTML = `
    <div class="flex justify-between items-start mb-3">
      <h4 class="text-lg font-bold text-primary">${poem.title}</h4>
      <span class="text-sm text-gray-500">${poem.dynasty}·${poem.author}</span>
    </div>
    <p class="text-gray-700 mb-3 line-clamp-3 font-serif">${poem.content.replace(/\n/g, '<br>')}</p>
    <a href="detail.html?id=${poem.id}" class="text-accent hover:underline flex items-center">
      阅读全文 <i class="fa fa-angle-right ml-1"></i>
    </a>
    <span class="absolute bottom-2 right-2 bg-secondary text-white px-2 py-1 rounded text-xs">${poem.category}</span> <!-- 新增category标签 -->
  `;
  poemsContainer.appendChild(poemCard);
});
  </script>
</body>
</html>